<template>
  <div>
    <el-row>
      <el-col :span="4">
        <i class="el-icon-s-home" style="font-size: 20px" />
        <span>工程字段</span>
      </el-col>
      <el-col :span="4">
        <span>预算金额</span>
      </el-col>
      <el-col :span="4">
        <span>单位</span>
      </el-col>
      <el-col :span="4">
        <span>预算工程量</span>
      </el-col>
      <el-col :span="4">
        <span>字段级别</span>
      </el-col>
      <el-col :span="4">
        <el-dropdown>
          <span class="btncaozuo">
            操作<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button type="text" @click="addDialogVisiable = true">添加字段</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-divider />
    </el-row>
    <div>
      <tree-table :data="tableData" :columns="columns" :selection-type="false" :show-header="false" :show-index="false"
        index-text="#" :expand-type="false" :isFold="false" class="treeTable">
        <template slot="level" slot-scope="scope">
          <el-tag :class="
            scope.row.level == '1' ||
              scope.row.level == '4' ||
              scope.row.level == '7'
              ? 'green'
              : scope.row.level == '2' ||
                scope.row.level == '5' ||
                scope.row.level == '8'
                ? 'blue'
                : scope.row.level == '3' ||
                  scope.row.level == '6' ||
                  scope.row.level == '9'
                  ? 'origin'
                  : 'origin'
          ">
            {{
                scope.row.level == "1"
                  ? "一级"
                  : scope.row.level == "2"
                    ? "二级"
                    : scope.row.level == "3"
                      ? "三级"
                      : scope.row.level == "4"
                        ? "四级"
                        : scope.row.level == "5"
                          ? "五级"
                          : scope.row.level == "6"
                            ? "六级"
                            : scope.row.level == "7"
                              ? "七级"
                              : scope.row.level == "8"
                                ? "八级"
                                : scope.row.level == "9"
                                  ? "九级"
                                  : scope.row.level == "10"
                                    ? "十级"
                                    : ""
            }}
          </el-tag>
        </template>
        <template slot="upd" slot-scope="scope">
          <el-dropdown class="xiala">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="showAddDepart(scope.row)">添加子字段
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="delDepart(scope.row)">删除字段</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="updataDepart(scope.row)">编辑字段</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </tree-table>
    </div>

    <!--添加字段对话框--->
    <el-dialog title="添加字段" :visible.sync="addDialogVisiable" width="40%" :close-on-click-modal="false"
      :before-close="resetAddForm">
      <el-form ref="labelPosition" :label-position="labelPosition" label-width="110px" :model="formLabelAlign">
        <el-form-item label="字段名称" prop="name" :rules="[{ required: true, message: '字段不能为空' }]">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="预算总金额" prop="predict_money" :rules="[{ required: true, message: '预算、测算金额不能为空' }]">
          <el-input v-model="formLabelAlign.predict_money" />
        </el-form-item>
        <el-form-item label="是否是材料" prop="is_materials">
          <el-switch v-model="formLabelAlign.is_materials" />
        </el-form-item>
        <div v-if="formLabelAlign.is_materials">
          <el-form-item label="预算总工程量" prop="predict_do">
            <el-input v-model="formLabelAlign.predict_do" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="formLabelAlign.unit" />
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addqx">取 消</el-button>
        <el-button type="primary" @click="addDepart">确 定</el-button>
      </span>
    </el-dialog>



    <!--编辑字段对话框--->
    <el-dialog title="修改字段" :visible.sync="updateDialogVisiable" width="40%" :close-on-click-modal="false"
      :before-close="updateqx">
      <el-form ref="labelPositionupdate" label-width="110px" :model="updata">
        <el-form-item label="字段名称" prop="name" :rules="[{ required: true, message: '字段不能为空' }]">
          <el-input v-model="updata.name" />
        </el-form-item>
        <el-form-item label="预算总金额" prop="predict_money" :rules="[{ required: true, message: '预算、测算金额不能为空' }]">
          <el-input v-model="updata.predict_money" />
        </el-form-item>

        <div v-if="updata.is_materials">
          <el-form-item label="预算总工程量" prop="predict_do">
            <el-input v-model="updata.predict_do" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="updata.unit" />
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateqx">取 消</el-button>
        <el-button type="primary" @click="updateDepart">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  jurisdictionget,
  jurisdictionpost,
  jurisdictiondel,
  jurisdictionput
} from "../../../../api/template";
export default {
  data() {
    return {
      columns: [
        { label: "字段名称", prop: "name" },
        { label: "预算金额", prop: "predict_money" },
        { label: "单位", prop: "unit" },
        { label: "预算工程量", prop: "predict_do" },

        {
          label: "字段等级",
          type: "template",
          template: "level",
          align: "left",
          headerAlign: "left",
        },
        {
          label: "操作",
          type: "template",
          template: "upd",
          align: "left",
        },
      ],
      tableData: [],
      addDialogVisiable: false,
      updateDialogVisiable: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        level: 1,
        is_materials: 0,
        pid: 0,
        models_id: this.$route.query.id,
        predict_money: "",
        predict_do: "",
        unit: "",
      },
      // 父级是否是材料
      parent_isMaterials: 0,
      editformLabelAlign: {
        departmentman: "",
      },
      defaultProps: {
        children: "children",
        label: "departmentName",
      },
      updata: {}
    };
  },
  activated() {
    this.getDeparts();
  },
  mounted() {
    this.getDeparts();
  },
  methods: {
    // 编辑字段触发按钮
    updataDepart(row) {
      console.log(row);
      this.updata = row
      this.updateDialogVisiable = true
    },
    // 编辑字段
    async updateDepart() {
      let res = await jurisdictionput(this.updata)
      console.log(res);
      this.updateDialogVisiable = false
      this.getDeparts()
    },


    // 添加等级话框
    showAddDepart(value) {
      console.log(value, "value");
      this.addDialogVisiable = true;
      this.formLabelAlign.pid = value.id;
      this.formLabelAlign.level = Number(value.level) + 1;
      this.parent_isMaterials = value.is_materials;
    },
    // 获取所有字段信息
    async getDeparts() {
      const res = await jurisdictionget(this.$route.query.id);
      console.log(res);
      if (res.code === 200) {
        this.tableData = res.data;
      }
    },
    // 添加子字段信息
    async addDepart() {
      this.$refs.labelPosition.validate(async (valid) => {
        if (valid) {
          if (this.parent_isMaterials && this.formLabelAlign.level != 1) {
            if (!this.formLabelAlign.is_materials) {
              this.$message.info("材料下面只能添加材料");
              return;
            }
          }
          if (!this.parent_isMaterials && this.formLabelAlign.level != 1) {
            if (this.formLabelAlign.is_materials) {
              this.$message.info("非材料字段不能添加材料");
              return;
            }
          }
          jurisdictionpost(this.formLabelAlign)
            .then((res) => {
              this.$message.success("添加成功！");
              this.resetAddForm();
              this.getDeparts();
            })
            .catch((err) => {
              this.$message.error("测算总金额和测算总工程量只能是数值");
            });
          //  const data = await jurisdictionpost(this.formLabelAlign)
          // if (data.code == 200) {
          //   this.$message.success("添加成功！");
          //   this.resetAddForm();
          //   this.getDeparts();
          // } else {
          //   this.$message.error("测算总金额和测算总工程量只能是数值");
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 清空表单方法
    resetAddForm() {
      this.parent_isMaterials = null;
      this.addDialogVisiable = false;
      this.formLabelAlign.level = 1;
      this.formLabelAlign.pid = 0;
      this.$refs["labelPosition"].resetFields();
    },
    // 删除字段信息
    async delDepart(row) {

      this.$confirm("此操作将永久删除该字段, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await jurisdictiondel(row);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getDeparts();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    addqx() {
      this.resetAddForm();
      console.log(this.formLabelAlign.level);
    },
    updateqx() {
      this.updateDialogVisiable = false
    }
  },
};
</script>

<style scoped>
.el-row {
  max-width: 80%;
  min-width: 40%;
  margin: 25px auto 0;
}

.el-dropdown {
  padding-right: 30px;
  text-align: right;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.bf {
  margin-left: 71%;
}

.custom-tree-node {
  width: 100% !important;
  margin-left: 40px;
}

.treeTable {
  max-width: 80%;
  min-width: 40%;
  margin: 0 auto;
}

.green {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.blue {
  background-color: #ecf5ff;
  color: #409eff;
}

.origin {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
</style>